<template>
  <div class="default-form-search-item">
    <el-text truncated class="default-form-search-item-label">
      {{ searchField.showName }}:
    </el-text>
    <div class="default-form-search-item-body">
      <SearchDelegate ref="comp" :field="searchField" :component="searchField.component"/>
    </div>
  </div>
</template>
<script setup>
import {inject, onMounted, ref} from 'vue';
import {isNotEmpty} from '@/utils/CommonUtils';
import SearchDelegate from '@/components/form/FormInputDelegates/SearchDelegate.vue';

const searchWrapperData = inject('searchWrapperData');
const comp = ref();
onMounted(() => {
  searchWrapperData.searchCallBacks.push(getSearchFieldValue);
  searchWrapperData.resetFieldMethods.push(resetFieldMethod);
});

function resetFieldMethod() {
  comp.value.resetField();
}

function getSearchFieldValue() {
  let temp = comp.value.getSearchFieldValue(searchWrapperData.searchData);
  if (isNotEmpty(temp)) {
    searchWrapperData.searchData[props.searchField.tableFieldName] = temp;
  }
}

const props = defineProps({
  searchField: {
    type: Object,
    default: () => undefined
  }
});
</script>
